import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";

import { $api } from "~/shared/api";
import { convertEmoji } from "~/shared/lib/convert-emoji";

import { materialDark as style } from "react-syntax-highlighter/dist/esm/styles/prism";

export default async function CommitModal({
  params: { sha },
}: {
  params: { sha: string };
}) {
  const { data: commit } = await $api.rest.repos.getCommit({
    owner: "velenyx",
    repo: "github-commit-explorer",
    ref: sha,
  });

  const aggregatedDiff =
    commit?.files?.reduce(
      (acc, file) => {
        return acc + (file.patch || ""); // Ensure to handle cases where patch might be undefined
      },
      String.raw``,
    ) || "";

  return (
    <div className="container">
      <h1 className="text-3xl">{convertEmoji(commit.commit.message)}</h1>
      <p>by {commit?.commit.author?.name}</p>
      <SyntaxHighlighter showLineNumbers language="diff" style={style}>
        {aggregatedDiff}
      </SyntaxHighlighter>
    </div>
  );
}
